<template>
	<view class="musiclist" v-show="isLoading">
		<view class="fixbg" :style="{backgroundImage: 'url(' +  playlist.coverImgUrl + ')'}"></view>
		<!-- 顶部header区域 -->
		<MusicHead title="歌单" :isShow="true" textColor="#fff"></MusicHead>
		<!-- 内容主体区域 -->
		<view class="content">
			<scroll-view scroll-y="true" >
				<!-- 头部 -->
				<view class="list-header">
					<!-- 头部左侧图片 -->
					<view class="list-herder-img">
						<image :src="playlist.coverImgUrl"></image>
						<text class="iconfont icon-yousanjiao"><text>{{playlist.playCount | Countformat}}</text></text>
					</view>
					<!-- 头部右侧文字 -->
					<view class="list-header-text">
						<view class="text-title">{{playlist.name}}</view>
						<view class="text-logo">
							<image :src="playlist.creator.avatarUrl" mode=""></image>

							<text>{{playlist.creator.nickname}}</text>
						</view>
						<view class="text-desc">
							{{playlist.description}}
						</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<!-- 分享区域 -->
				<button open-type="share" class="share-btn">
					<text class="iconfont icon-fenxiang"></text>
					<text>分享给微信好友</text>
				</button>
				<!-- #endif -->
				
				<!-- 音乐列表区域 -->
				<view class="list-main">
					<!-- 播放全部区域 -->
					<view class="main-head" @tap="handleToPlayAll">
						<text class="iconfont icon-bofang"></text>
						<text>播放全部</text>
						<text>(共{{playlist.trackCount}}首)</text>
					</view>
					<!-- 歌曲列表区域 -->
					<view class="list" v-for="(item,index) in playlist.tracks" :key="index" @tap="gotoDetail(item.id)">
						<view>{{index + 1}}</view>
						<view>
							<view class="musice-name">{{item.name}}</view>
							<view class="music-author">
								<image src="../../static/images/sq.png" v-if="privileges[index].maxbr === 999000"></image>
								<image src="../../static/images/vip.png" v-if="privileges[index].fee === 1"></image>
								<text v-for="(itemAr,index) in item.ar" :key="index">{{itemAr.name}}{{index === item.ar.length-1 ? '' : '/'}}
								</text>-{{item.al.name}}
							</view>
						</view>
						<view class="iconfont icon-bofang1"></view>
					</view>
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import {getMusicList} from "@/api/getMusicList.js"
	import "@/common/iconfont.css"
	export default {
		data() {
			return {
				// 歌单信息
				playlist: {
					coverImgUrl: '',
					creator:{
							avatarUrl: '',
							nickname: ''
					}
				},
				// privileges
				privileges: [],
				isLoading: true
			}
		},
		async onLoad(options){
			console.log(options.id)
			this.isLoading = false
			uni.showLoading({
				title:'加载中...',
				mask: true
			})
			const res = await getMusicList(options.id)
			// console.log(res)
			if(res.code !== 200) return 
			this.playlist = res.playlist
			this.privileges = res.privileges
      
      // 往 store 中存储数据
      this.$store.commit('INIT_TOPLISTIDS',res.playlist.trackIds)
      
			this.isLoading = true
			uni.hideLoading()
		},
		methods: {
			gotoDetail(id){
				uni.navigateTo({
					url:"/pages/musicdetail/musicdetail?id=" + id
				})
			},
      handleToPlayAll(){
        uni.navigateTo({
        	url:"/pages/musicdetail/musicdetail?id=" + this.$store.state.topListIds[0].id
        })
        console.log(111)
      }
		}
	}
</script>

<style scoped>
 .list-header{
	 display: flex;
	 padding: 70rpx 35rpx 40rpx;
	 /* background-color: #007AFF; */
 }
 .list-herder-img{
	 position: relative;
	 width: 260rpx;
	 height: 260rpx;
 }
 .list-herder-img image{
	 width: 100%;
	 height: 100%;
	 border-radius: 20rpx;
 }
  .list-herder-img>text{
		color: #fff;
		font-size: 22rpx;
		position: absolute;
		right:10rpx;
		top:6rpx
	}
	.list-header-text{
		flex: 1;
	}
	
	/* 右侧 */
	.list-header-text{
		margin-left: 40rpx;
		padding-top: 10rpx;
	}
	.text-title{
		color: #fff;
		font-size: 30rpx;
	}
	.text-logo{
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		color: #f5f5f5;
		font-size: 24rpx;
	}
	.list-header-text .text-logo image{
		width: 58rpx;
		height: 58rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}
	.text-desc{
		color: #f5f5f5;
		font-size: 20rpx;
		/*1. 超出的部分隐藏 */
		overflow: hidden;
		/*2. 文字用省略号替代超出的部分 */
		text-overflow: ellipsis;
		/* 3. 弹性伸缩盒子模型显示 */
		display: -webkit-box;
		/* 4. 限制在一个块元素显示的文本的行数 */
		-webkit-line-clamp: 2;
		/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-box-orient: vertical;
	}
  
	/* 分享 */
 .share-btn{
	 margin: 0 auto 40rpx;
	 width: 330rpx;
	 line-height: 70rpx;
	 color: #fff;
	 border-radius: 35rpx;
	 font-size: 28rpx;
	 background-color: rgba(0,0,0,.1);
	 
 }
 .share-btn .iconfont{
	 padding-right: 10rpx;
	 vertical-align: middle;
 }

 /* 列表区域 */
 .list-main{
 	box-sizing: border-box;
 	 width: 100%;
 	 background-color: #fff;
 	 border-radius: 40rpx 40rpx 0 0;
 	 padding: 0 35rpx;
 }
 /* 播放全部 */
 .main-head{
 	box-sizing: border-box;
 	padding: 30rpx 0;
 	/* background-color: #4CD964; */
 }
 .main-head text:nth-of-type(1){
 	font-size: 40rpx;
 	margin-right: 26rpx;
 	/* font-weight: bold; */
 	color: #000;
 }
 .main-head text:nth-of-type(2){
 	font-size: 32rpx;
 	margin-right: 8rpx;
 	color: #000;
 }
 .main-head text:nth-of-type(3){
 	font-size: 26rpx;
 	color: #adadad;
 }
 /* 歌曲列表 */
 .list{
 	display: flex;
 	justify-content: space-between;
 	padding: 32rpx 0;
 }
 .list>view:nth-of-type(1){
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 40rpx;
 	color: #888886;
 	/* font-size: 22rpx; */
 	margin-right: 26rpx;
 }
 .list>view:nth-of-type(2){
 	flex: 1;
 }
 .list>view:nth-of-type(2) .musice-name{
 	/* box-sizing: border-box;
 	width: 70vh; */
 	font-size: 28rpx;
 	color: #333;
 	margin-bottom: 10rpx;
 	padding-right: 40rpx;
 	/*1. 超出的部分隐藏 */
 	overflow: hidden;
 	/*2. 文字用省略号替代超出的部分 */
 	text-overflow: ellipsis;
 	/* 3. 弹性伸缩盒子模型显示 */
 	display: -webkit-box;
 	/* 4. 限制在一个块元素显示的文本的行数 */
 	-webkit-line-clamp: 1;
 	/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
 	-webkit-box-orient: vertical;
 }
 .list view:nth-of-type(2) .music-author{
 	/* box-sizing: border-box;
 	width: 70vh; */
 	font-size: 20rpx;
 	color: #a0a0a0;
 	padding-right: 40rpx;
 	/*1. 超出的部分隐藏 */
 	overflow: hidden;
 	/*2. 文字用省略号替代超出的部分 */
 	text-overflow: ellipsis;
 	/* 3. 弹性伸缩盒子模型显示 */
 	display: -webkit-box;
 	/* 4. 限制在一个块元素显示的文本的行数 */
 	-webkit-line-clamp: 1;
 	/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
 	-webkit-box-orient: vertical;
 }
 .list view:nth-of-type(2) image{
 	width: 30rpx;
 	height: 20rpx;
 	margin-right: 8rpx;
 }
 .list view:nth-of-type(3){
 	display: flex;
 	align-items: center;
 	width: 50rpx;
 	font-size: 50rpx;
 	color: #c4c4c4;
 }
</style>
